<template>
  <div id="cat-container">
    <template v-if="currentObj">
      <div class="goback" @click="goback">返回</div>
      <div class="detail-container">
        <h2>{{ currentObj.name }} <span>/ cat</span></h2>
        <div class="text-container">
          <img
            :src="getImg(currentObj.cover)"
            align="right"
            width="190"
            hspace="5"
            vspace="5"
          />
          <p style="font-size: 16px">{{ currentObj.content }}</p>
        </div>
      </div>
    </template>
    <template v-else>
      <div
        class="Service-item col-xs-12 col-sm-6 col-md-3 wow slideInUp"
        v-for="(item, index) in catList"
        :key="index"
        @click="goDetail(item.id)"
      >
        <div class="Service-item-wrapper">
          <div class="Service-item-top">
            <h4>{{ item.name }}</h4>
            <i></i>
            <p>cat</p>
          </div>
          <div class="Service-item-img">
            <img :src="getImg(item.cover)" alt="狗狗" />
          </div>
          <div class="Service-item-border"></div>
        </div>
      </div>
    </template>
  </div>
</template>
<script>
import { getAction } from "../util/basic";
export default {
  name: "Software",
  data() {
    return {
      catList: [],
      url: {
        list: "cat/list",
        detail: "cat/detail",
      },
      currentObj: null,
    };
  },
  mounted() {
    this.initData();
  },
  methods: {
    initData() {
      getAction(this.url.list).then((res) => {
        if (res.success) {
          this.catList = res.result;
        }
      });
    },
    goback() {
      this.currentObj = null;
    },
    goDetail(id) {
      getAction(this.url.detail, { id: id }).then((res) => {
        if (res.success) {
          this.currentObj = res.result;
        }
      });
    },
    getImg(cover) {
      let url = "";
      if (cover) {
        url = JSON.parse(cover)[0].absolute_path;
      }
      return url;
    },
  },
};
</script>
<style scoped>
.detail-container h2 span {
  font-size: 65%;
  color: #777;
}

.detail-container > h2 {
  padding-bottom: 20px;
  border-bottom: 1px solid #ccc;
}
.goback {
  color: #337ab7;
  cursor: pointer;
}
.Service-item {
  margin-bottom: 30px;
}
.Service-item-wrapper {
  cursor: pointer;
  background: rgba(244, 244, 244, 1);
  overflow: hidden;
  position: relative;
}
.Service-item-top {
  width: 100%;
  height: 120px;
  padding: 30px;
  text-align: center;
}
.Service-item-top > i {
  display: inline-block;
  width: 25px;
  height: 2px;
  background: #28f;
}
.Service-item-top > p {
  color: #b2b2b2;
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.5s ease;
}
.Service-item-img {
  width: 100%;
  overflow: hidden;
}
.Service-item-img img {
  width: 100%;
  height: 180px;
  transition: all 0.5s ease;
}
.Service-item-border {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  z-index: 9999999;
  width: 100%;
  height: 100%;
  transition: all 0.5s ease;
  border: 1px solid #000;
  opacity: 0;
}
.Service-item-wrapper:hover .Service-item-top > i {
  opacity: 0;
}
.Service-item-wrapper:hover .Service-item-top > p {
  opacity: 1;
  transform: translateY(-10px);
}
.Service-item-wrapper:hover .Service-item-img > img {
  transform: scale(1.1, 1.1);
}
.Service-item-wrapper:hover > .Service-item-border {
  opacity: 1;
  width: 90%;
  height: 90%;
}
</style>

